iT邦幫忙

2022 iThome 鐵人賽

DAY 28
0
Modern Web

意識界歸來的前端系列 第 28

outline 與 border 差異

  • 分享至 

  • xImage
  •  

此篇會介紹設置邊框樣式的兩種方式 outline、border 有什麼差異。

<p class="inline-block text-base outline outline-[3px] outline-red-700 border-[3px] border-solid border-black">this is text</p>


從上方結果來看,可以發覺 outline 在 border 外層

outline

又稱為輪廓,位於邊框邊緣的外圍。

Tips

  • 不會佔據元素任何空間。
  • 樣式不能單獨設置單邊樣式。

reference


上一篇
line-height 對於元素高度影響
下一篇
line box 和字體關係
系列文
意識界歸來的前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言